import React, { useEffect, useState } from 'react'
import Scroll from '../../baseUI/scroll'
import { Container,Box,Top} from './style.js'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
import RotationChart from
    '@/components/main/rotationChart/RotationChart'
import MenuBar from
    '@/components/main/menuBar/MenuBar.jsx'
import ImgList from '@/components/main/imgList/ImgList'
import SearchInput from '../../components/SearchInput/SearchInput.jsx'
import { forceCheck } from 'react-lazyload'
import Logo from '../../components/logo/Logo.jsx'
import ListData from '../../components/main/listData/ListData.jsx'
import * as api from '@/api'


const Main = (props) => {
    // 状态
    const { maindata } = props
    const [index,setIndex] = useState(0);
    // action
    const { getMainDataDispatch } = props
    const { rotationImg = [], menuBarData = {}, imgList = {} } = maindata
    let [page, setPage] = useState(1);
    
    let [list, setList] = useState([])
    const [navBarFixed, setNavBarFixed] = useState(false);

    const fetchList = () => {
        api
            .reqlist(page)
            .then(res => {
                setList([
                    ...list,
                    ...res.data.data.list
                ])
            })
    }
    useEffect(() => {
        if (!maindata.length) {
            getMainDataDispatch()
        }
        fetchList()
    }, [])

    useEffect(() => {
        fetchList()
    }, [page])

    const handleOnclick = () => {
        // popup 组件的显示？
        setShowPopup(!showPopup)
    }
    // 上拉加载更多
    const handlePullUp = () => {
        
        setPage(++page)
    }
    // 下拉刷新
    const handlePullDown = () => {
        fetchList()
    }   
    return (
        <Container>
            <Logo />
            <Box>
                <SearchInput
                    handleOnclick={() => { handleOnclick() }}
                    searchBoxHandleOnclick={() => history.push('/search')} />
                <div className="scrollContainer">
                    <Scroll
                        direction={"vertical"}
                        refresh={false}
                        onScroll={(e) => {
                            forceCheck()
                        }
                        }
                        pullUp={handlePullUp}
                        pullDown={handlePullDown}
                    >
                        <div >
                            <MenuBar menuBarData={menuBarData}></MenuBar>
                            <div className="roration">
                            <img src="https://yanxuan.nosdn.127.net/static-union/1639618260614c21.gif" alt="" />
                            </div>
                            <div className="activity">
                                <img src="https://yanxuan.nosdn.127.net/4625238426191a895bb66b030fcc9fb3.gif" alt="" />
                            </div>
                            {/* <RotationChart rotationImg={rotationImg} /> */}
                            {/* <ImgList imgList={imgList}> </ImgList> */}
                            <Top>
                <Scroll
                  direction={"horizental"}
                        refresh={false}
                    onScroll = {(e) =>{ 
                    }}
                >
                <div className={`topContainer${navBarFixed?"navBar-fixed" : ""}`}>
                    <div className={`title ${index ==0 ? "active":""}`}>猜你喜欢</div>
                    <div className={`title ${index ==1 ? "active":""}`}>居家生活</div>
                    <div className={`title ${index ==2 ? "active":""}`}>美食酒水</div>
                    <div className={`title ${index ==3 ? "active":""}`}>个人护理</div>
                    <div className={`title ${index ==4 ? "active":""}`}>母婴亲子</div>
                    <div className={`title ${index ==5 ? "active":""}`}>外出旅行</div>
                </div>
                </Scroll>
                            </Top>
                            <ListData list={list} navBarFixed={navBarFixed} ></ListData>
                        </div>
                    </Scroll>
                </div>
            </Box>
        </Container>
    )
}
const mapStateToPorps = (state) => {
    return {
        maindata: state.main.maindata
    }
}
const mapStateToDispatch = (dispatch) => {
    return {
        getMainDataDispatch() {
            dispatch(actionTypes.getMainData())
        }
    }
}

export default connect(mapStateToPorps, mapStateToDispatch)(Main)
